<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
    padding-bottom: 90px;
    overflow: auto;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    border-radius: 5px;
    margin-top: 0;
  }
  .paylayer {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    z-index: 100;
  }
  .rj-cont {
    background: #fff;
  }
  .rj-cell span i {
    color: red;
    font-size: 30px;
    font-style: normal;
  }
  .paylayer .rj-cell {
    padding: 5px;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
  }
  .all-btn {
    position: absolute;
    right: 8px;
    top: 1px;
  }
  .all-btn i {
    font-size: 16px;
    position: absolute;
    left: -7px;
    top: 8px;
  }
  .weui-cells {
    text-align: left;
  }
</style>
<template>
  <div class="comon">
    <div class="rj-topbar rj-cont">
      待回款订单
      <a @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px">
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit" style="position: relative;">
          <div class="rj-cell max" style="text-align: center;">
            <span style="width: 100%;">{{customername}}</span>
          </div>
          <div class="rj-cell all-btn" style="" id="allSec">
            <i class="weui-icon-circle"></i>
            <label>全选</label>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id="list">
      <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" >
        <mescroll-vue ref="mescroll" id="wrapper" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <div class="weui-form-preview" v-for="(item, index) in orders" :key="item.guid">
            <div class="weui-cells weui-cells_checkbox">
              <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary payitem" data-guid="">
                  <p> </p>
                  <div class="rj-cell max">
                    <label>销售单号：</label>
                    <span>{{item.sellcode}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>申请人：</label>
                    <span>{{item.applyname}}</span>
                    <span>{{item.depname}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>结算金额({{item.currency == 2 ? '美元' : '元'}})：</label>
                    <span>{{item.finalamount}}</span>
                  </div>
<!--                  <div class="rj-cell max">-->
<!--                    <label>已回款金额(元)：</label>-->
<!--                    <span>{{item.backmoney}}</span>-->
<!--                  </div>-->
<!--                  <div class="rj-cell max">-->
<!--                    <label>未回款金额(元)：</label>-->
<!--                    <span style="color: red;">{{item.finalamount - item.backmoney}}</span>-->
<!--                  </div>-->
<!--                  <div class="rj-cell max minpad">-->
<!--                    <label>销售形式：</label>-->
<!--                    <span>{{item.saletypename}}</span>-->
<!--                  </div>-->
                  <div class="rj-cell max">
                    <label>发货工厂：</label>
                    <span>{{item.storeroomname}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>状态：</label>
                    <span>{{item.statusname}}</span>
                  </div>
                  <div class="rj-cell">
                    <label>备注：</label>
                    <span style="color: #000;">{{item.remarks}}</span>
                  </div>
                  <div class="rj-cell max">
                    <label>创建时间：</label>
                    <span>{{item.createtime}}</span>
                  </div>
                  <p></p>
                </div>
                <label class="weui-check_label weui-cell__ft" :for="'weui-select-id-' + item.guid">
<!--                  <input type="checkbox" class="weui-check" name="weui-select" :value="item.guid" :data-amount="item.finalamount - item.backmoney" :data-weight="item.weight" :data-guid="item.guid" :id="'weui-select-id-' + item.guid" data-title="" />-->
                  <input type="checkbox" class="weui-check" name="weui-select" :value="item.guid" :data-amount="item.finalamount" :data-weight="item.weight" :data-guid="item.guid" :id="'weui-select-id-' + item.guid" data-title="" />
                  <span class="weui-icon-checked"></span>
                </label>
              </div>
            </div>
          </div>
        </mescroll-vue>
      </div>
    </div>
    <div class="paylayer">
      <div class="rj-cell">
        <label>合计：</label>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="carnum"><i>0</i> 车</span>
      </div>
<!--      <div class="rj-cell">-->
<!--        <label></label>-->
<!--        <span id="weight"><i>0</i> 吨</span>-->
<!--      </div>-->
      <div class="rj-cell">
        <label></label>
        <span id="amount"><i>0</i> {{currency == 2 ? '美元' : '元'}}</span>
      </div>
      <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="send" href="javascript:">确定</a>
        <a class="weui-form-preview__btn weui-form-preview__btn_default" @click="$router.back(-1)">返回</a>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  import MescrollVue from 'mescroll.js/mescroll.vue'

  export default {
    name: 'PaybackOrdersList',
    components: {MescrollVue},
    data () {
      return {
        paybackid: '',
        customerid: '',
        customername: '',
        currency: 1,
        orders: [],
        mescroll: null, // mescroll实例对象
        mescrollDown: {},
        mescrollUp: { // 上拉加载的配置.
          callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
          page: {
            num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
            size: 5 //每页数据条数,默认10
          },
          htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',
          noMoreSize: 1,
          empty: {
            warpId: "wrapper", //父布局的id (1.3.5版本支持传入dom元素)
            tip: "暂无相关数据~" //提示
          }
        },
        wrapperHeight: 600,
        totalGuids: '',
        selected : false
      }
    },
    created() {
    },
    mounted() {
      this.customerid = this.$route.query.customerid;
      this.customername = this.$route.query.customername;
      this.currency = this.$route.query.currency;

      let that = this;
      //首次加载为未选中状态
      $('#allSec').click(function(){
        var elem = $('input[name="weui-select"]');
        for (var i=0; i< elem.length; i++) {
          if (!elem.eq(i).is(':checked')) {
            that.selected = true;
          }
        }
        if (that.selected) {
          that.switchChecked(false, elem);
        } else {
          that.switchChecked(true, elem);
        }
      })

      //选择运单后计算总支付金额
      $('#app').on("change", "input[name='weui-select']", function(){
        var elem = $('input[name="weui-select"]:checked');
        var len = elem.length;
        var totalAmoumt = 0;
        var totalCarnum = 0;
        var totalWeight = 0;
        that.totalGuids = "";
        for (var i=0; i<len; i++) {
          totalAmoumt += elem.eq(i).data('amount');
          totalWeight += elem.eq(i).data('weight');
          that.totalGuids = that.totalGuids + elem.eq(i).data('guid') + ',';
          console.log(that.totalGuids);
          totalCarnum += 1;
        }
        //联动全选按钮
        if (totalCarnum == $('input[name="weui-select"]').length) {
          if (that.selected) {
            that.switchBtnStyle(true);
          }
        } else {
          if (!that.selected) {
            that.switchBtnStyle(false);
          }
        }

        $('#amount i').text(that.toDecimal2NoZero(totalAmoumt));
        //$('#weight i').text(that.toDecimal2NoZero(totalWeight));
        $('#carnum i').text(totalCarnum);
        that.totalGuids = that.totalGuids.substr(0,that.totalGuids.length-1);
      })
      // $('input[type="checkbox"]').change(function () {
      //   console.log('val:', $(this).val())
      // })
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 40;
    },
    methods: {
      mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
      },
      upCallback (page, mescroll) {
        let postParams = {};
        postParams.pageNo = page.num;
        postParams.pageSize = page.size;
        postParams.customerid = this.customerid;
        // 联网请求
        this.axios({
          method: 'get',
          url: '/pay/Paybackinfo!paybacklistForSF.action',
          params: postParams
        }).then((response) => {
          if (response.data.code == 1) {
            let res = response.data.msg != undefined ? response.data.msg : {rows: []};
            console.log('res:', res)
            //设置财务数据查看权限
            // 如果是第一页需手动置空列表
            if (page.num === 1) this.orders = []
            // 把请求到的数据添加到列表
            this.orders = this.orders.concat(res.rows);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(res.rows.length)
            })
          } else if (response.data.code == 0) {
            this.toastText(response.data.msg);
          } else {
            this.toastError("系统错误");
          }

        }).catch((e) => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr()
        })
      },
      switchChecked: function (status, elem) {
        if (status) {
          for (var i=0; i< elem.length; i++) {
            if (elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(false);
        } else {
          for (var i=0; i< elem.length; i++) {
            if (!elem.eq(i).is(':checked')) {
              elem.eq(i).click();
            }
          }
          this.switchBtnStyle(true);
        }
      },
      switchBtnStyle: function (status){
        if (status) {
          $('#allSec').find('i').removeClass("weui-icon-circle");
          $('#allSec').find('i').addClass("weui-icon-success");
          this.selected = false;
        } else {
          $('#allSec').find('i').removeClass("weui-icon-success");
          $('#allSec').find('i').addClass("weui-icon-circle");
          this.selected = true;
        }
      },
      send: function () {
        let that = this;
        let selectedOrders = [];
        selectedOrders = this.orders.filter(function (item) {
          return that.totalGuids.indexOf(item.guid) > -1;
        });
        let wrapOrders = selectedOrders.map(function (item) {
          return {orderid: item.guid, ordercode: item.sellcode, amount:item.finalamount, currency:item.currency, remark:item.remark};
        });
        this.$store.commit('setSellforms', wrapOrders);

        this.$router.push({name: 'AddPayback', query: {reffer: 'orderlist', customerid: this.customerid}});
      }
    }
  };
</script>
